ngRepeat
( directive in module ng
)
The ngRepeat
directive instantiates a template once per item from a collection. Each template
instance gets its own scope, where the given loop variable is set to the current collection item,
and $index
is set to the item index or key.
Special properties are exposed on the local scope of each template instance, including:
$index
– {number}
– iterator offset of the repeated element (0..length-1)$first
– {boolean}
– true if the repeated element is first in the iterator.$middle
– {boolean}
– true if the repeated element is between the first and last in the iterator.$last
– {boolean}
– true if the repeated element is last in the iterator.Additionally, you can also provide animations via the ngAnimate attribute to animate the enter, leave and move effects.
<ANY ng-repeat="{repeat_expression}"> ... </ANY>as class
<ANY class="ng-repeat: {repeat_expression};"> ... </ANY>
ngRepeat – {repeat_expression} –
The expression indicating how to enumerate a collection. These formats are currently supported:
variable in expression
– where variable is the user defined loop variable and expression
is a scope expression giving the collection to enumerate.
For example: track in cd.tracks
.
(key, value) in expression
– where key
and value
can be any user defined identifiers,
and expression
is the scope expression giving the collection to enumerate.
For example: (name, age) in {'adam':10, 'amalie':12}
.
variable in expression track by tracking_expression
– You can also provide an optional tracking function
which can be used to associate the objects in the collection with the DOM elements. If no tractking function
is specified the ng-repeat associates elements by identity in the collection. It is an error to have
more then one tractking function to resolve to the same key. (This would mean that two distinct objects are
mapped to the same DOM element, which is not possible.)
For example: item in items
is equivalent to item in items track by $id(item)'. This implies that the DOM elements
will be associated by item identity in the array.
For example:
item in items track by $id(item) . A built in
$id() function can be used to assign a unique
$$hashKey property to each item in the array. This property is then used as a key to associated DOM elements
with the corresponding item in the array by identity. Moving the same object in array would move the DOM
element in the same way ian the DOM.
For example:
item in items track by item.id Is a typical pattern when the items come from the database. In this
case the object identity does not matter. Two objects are considered equivalent as long as their
id`
property is same.
This example initializes the scope to a list of names and
then uses ngRepeat
to display every person:
.example-repeat-enter-setup {
line-height:0;
opacity:0;
}
.example-repeat-enter-setup.example-repeat-enter-start {
line-height:20px;
opacity:1;
}
.example-repeat-leave-setup {
opacity:1;
line-height:20px;
}
.example-repeat-leave-setup.example-repeat-leave-start {
opacity:0;
line-height:0;
}
.example-repeat-move-setup { }
.example-repeat-move-setup.example-repeat-move-start { }
</file>
<file name="scenario.js">
it('should render initial data set', function() {
var r = using('.doc-example-live').repeater('ul li');
expect(r.count()).toBe(10);
expect(r.row(0)).toEqual(["1","John","25"]);
expect(r.row(1)).toEqual(["2","Jessie","30"]);
expect(r.row(9)).toEqual(["10","Samantha","60"]);
expect(binding('friends.length')).toBe("10");
});
it('should update repeater when filter predicate changes', function() {
var r = using('.doc-example-live').repeater('ul li');
expect(r.count()).toBe(10);
input('q').enter('ma');
expect(r.count()).toBe(2);
expect(r.row(0)).toEqual(["1","Mary","28"]);
expect(r.row(1)).toEqual(["2","Samantha","60"]);
});
</file>
</example>